<template>
    <div class="container" :style="{height:height}">
        <list :style="_listStyle">
            <cell v-for="(item,index) in resData">
                <cell-contact
                        :user-name="item.contactName"
                        :job-name="item.contactJob"
                        @detailClicked="openBottomPopupByDetail(index)"
                        @deleteClicked="deleteContact(index,item.userContactId)"
                        :phone="item.contactPhone"></cell-contact>
            </cell>
        </list>
        <div @click="openBottomPopup"
             :class="['info-modify-btn',!isShow && 'hidden-area']">
            <text style="font-size:36px;color: white;">{{'添加'}}</text>
        </div>

        <wxc-popup popup-color="#f2f3f4"
                   :show="isBottomShow"
                   @wxcPopupOverlayClicked="popupOverlayBottomClick"
                   pos="right">
            <div class="demo-content">
                <head-bar height="80" :middleText="isModify ? '修改联系人':'添加联系人'" :leftClick="closeModfiyOrSaveLayer"></head-bar>

                <div class="cell cell-bottom-border">
                    <div class="cell-label">
                        <text class="text-notmal label-title">联系人</text>
                    </div>
                    <div class="cell-content">
                        <input style="width: 420px;height: 90px;" name="contactName" class="text-minor" v-model="addFormData.contactName"/></div>
                </div>
                <div class="cell cell-bottom-border">
                    <div class="cell-label">
                        <text class="text-notmal label-title">电话</text>
                    </div>
                    <div class="cell-content">
                        <input style="width: 420px;height: 90px;" name="contactPhone" class="text-minor" v-model="addFormData.contactPhone"
                               /></div>
                </div>
                <div class="cell cell-bottom-border">
                    <div class="cell-label">
                        <text class="text-notmal label-title">职务</text>
                    </div>
                    <div class="cell-content">
                        <input style="width: 420px;height: 90px;" class="text-minor" name="'contactJob'" v-model="addFormData.contactJob"
                               /></div>
                </div>
                <div class="cell cell-bottom-border">
                    <div class="cell-label">
                        <text class="text-notmal label-title">地点</text>
                    </div>
                    <div class="cell-content">
                        <input style="width: 420px;height: 90px;" name="contactPlace" class="text-minor" v-model="addFormData.contactPlace"
                               /></div>
                </div>
                <div class="cell cell-bottom-border">
                    <div class="cell-label">
                        <text class="text-notmal label-title">微信</text>
                    </div>
                    <div class="cell-content">
                        <input style="width: 420px;height: 90px;" name="contactWeixin" class="text-minor" v-model="addFormData.contactWeixin"
                               /></div>
                </div>
                <div class="cell cell-bottom-border">
                    <div class="cell-label">
                        <text class="text-notmal label-title">QQ</text>
                    </div>
                    <div class="cell-content">
                        <input style="width: 420px;height: 90px;" name="contactQq" class="text-minor" v-model="addFormData.contactQq"
                               /></div>
                </div>
                <cell-date title="生日" :value="formatTime(addFormData.contactBirthday)" @getVal="getTimeVal"></cell-date>
                <div class="cell cell-bottom-border">
                    <div class="cell-label">
                        <text class="text-notmal label-title">邮箱</text>
                    </div>
                    <div class="cell-content">
                        <input style="width: 420px;height: 90px;"
                               name="contactEmail"
                               class="text-minor" v-model="addFormData.contactEmail"/>
                    </div>
                </div>

                <div :class="['info-modify-btn']" @click="submitForm">
                    <text style="font-size:36px;color: white;">{{isModify ? '修改':'保存'}}</text>
                </div>
            </div>
        </wxc-popup>


        <wxc-popup popup-color="#f2f3f4"
                   :show="isBottomShowByDetail"
                   @wxcPopupOverlayClicked="infoDetailPopupOverlayBottomClick"
                   pos="right">
            <div class="demo-content">
                <head-bar height="80" middleText="联系人信息" :leftClick="infoDetailPopupOverlayBottomClick" :rightClick="modcontact" rightText="修改"></head-bar>

                <div class="cell cell-top-border cell-bottom-border">
                    <div class="cell-label">
                        <text class="text-danger label-tag">*</text>
                        <text class="text-notmal label-title">联系人</text>
                    </div>
                    <div class="cell-content"><text class="text-minor">{{detailData.contactName}}</text></div>
                </div>

                <div class="cell cell-bottom-border">
                    <div class="cell-label">
                        <text class="text-notmal label-title">手机号码</text>
                    </div>
                    <div class="cell-content"><text class="text-minor">{{detailData.contactPhone}}</text></div>
                </div>
                <div class="cell cell-bottom-border">
                    <div class="cell-label">
                        <text class="text-notmal label-title">职务</text>
                    </div>
                    <div class="cell-content"><text class="text-minor">{{detailData.contactJob}}</text></div>
                </div>
                <div class="cell cell-bottom-border">
                    <div class="cell-label">
                        <text class="text-notmal label-title">地点</text>
                    </div>
                    <div class="cell-content"><text class="text-minor">{{detailData.contactPlace}}</text></div>
                </div>
                <div class="cell cell-bottom-border">
                    <div class="cell-label">
                        <text class="text-notmal label-title">微信</text>
                    </div>
                    <div class="cell-content"><text class="text-minor">{{detailData.contactWeixin}}</text></div>
                </div>
                <div class="cell cell-bottom-border">
                    <div class="cell-label">
                        <text class="text-notmal label-title">QQ</text>
                    </div>
                    <div class="cell-content"><text class="text-minor">{{detailData.contactQq}}</text></div>
                </div>
                <div class="cell cell-bottom-border">
                    <div class="cell-label">
                        <text class="text-notmal label-title">生日</text>
                    </div>
                    <div class="cell-content"><text class="text-minor">{{formatTime(detailData.contactBirthday)}}</text></div>
                </div>
                <div class="cell cell-bottom-border">
                    <div class="cell-label">
                        <text class="text-notmal label-title">邮箱</text>
                    </div>
                    <div class="cell-content"><text class="text-minor">{{detailData.contactEmail}}</text></div>
                </div>
            </div>
        </wxc-popup>
    </div>
</template>
<style>

    .info-modify-btn {
        position: fixed;
        bottom: -1;
        height: 80px;
        width: 750px;
        background-color: #01a65a;
        justify-content: center;
        align-items: center;
    }

    .hidden-area {
        height: 0px;
    }

    .container {
        background-color: #f2f3f4;
    }

</style>
<style>
    .container {
        flex-direction: column;
        background-color: #F6F6F6;
    }

    .content {
        width: 750px;
        height: 200px;
        padding-left: 20px;
        font-size: 30px;
        padding-top: 15px;
    }

    .follow-content {
        background-color: white;
        padding-top: 36px;
    }

    .content-label {
        flex-direction: row;
        padding-left: 15px;
        width: 750px;
    }

    .content-label-tag {
        font-size: 32px;
        color: #ff5d54;
    }

    .content-label-t {
        font-size: 32px;
        color: #272727;
    }

    .image-area {
        justify-content: flex-start;
    }

    .image-panel {
        width: 150px;
        height: 150px;
        border-width: 1px;
        border-color: #d1d1d1;
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .image-i {
        width: 150px;
        height: 150px;
    }

    .cell {
        width: 750px;
        height: 90px;
        padding-left: 15px;
        padding-right: 15px;
        flex-direction: row;
        background-color: white;
    }

    .cell-label {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 300px;
    }

    .cell-content {
        justify-content: center;
        align-items: flex-end;
        width: 420px;
    }

    .cell-top-border {
        border-top-color: #e2e2e2;
        border-top-width: 1px;
    }

    .cell-bottom-border {
        border-bottom-color: #e2e2e2;
        border-bottom-width: 1px;
    }


</style>
<!--全局通用样式-->
<style>

    .text-minor {
        font-size: 30px;
        color: #c4c4c4;
    }

    .text-notmal {
        font-size: 30px;
        color: #272727;
    }

    .text-important {
        font-size: 30px;
        color: #000000;
        font-weight: 800;
    }

    .text-success {
        font-size: 30px;
        color: #01a65a;
    }

    .text-danger {
        font-size: 30px;
        color: red;
    }


</style>


<script>
    import {Utils, WxcPopup} from 'weex-ui'
    import nw from '../network/nw.js'
    import stl from '../utils/stringUtils.js'
    import dtl from '../utils/dateUtils.js'
    import headBar from '../components/headBar.vue'
    import cellDate from '../components/cellDate.vue'
    import cellContact from '../businessComponents/cellContact.vue'


    var initFormData =  {
        "userId": "",
        "userType": "",
        "contactJob": "",
        "contactName": "",
        "contactPhone": "",
        "contactPlace": "",
        "contactWeixin": "",
        "contactQq": "",
        "contactBirthday": "",
        "contactEmail": ""
    }

    export default {
        components: {cellContact, WxcPopup, headBar, cellDate},
        props: {
            userId: {
                type: Number
            },
            userType: {
                type: String
            },
            isShow: {
                type: Boolean,
                default: true
            }
        },
        data: () => ({
            resData: [],
            height: 1344,
            isBottomShow: false,
            isBottomShowByDetail: false,
            detailData:{},
            addFormData: {
                "userId": "",
                "userType": "",
                "contactJob": "",
                "contactName": "",
                "contactPhone": "",
                "contactPlace": "",
                "contactWeixin": "",
                "contactQq": "",
                "contactBirthday": "",
                "contactEmail": ""
            },
            isModify:false//当前是否有修改
        }),
        computed: {
            _listStyle() {
                return {height: this.resData.length * 140}
            }
        },
        methods: {
            //修改页面跳返回
            closeModfiyOrSaveLayer(){
                if(this.isModify){
                    this.isBottomShow = false
                    this.isBottomShowByDetail = true
                    this.addFormData = initFormData
                    this.isModify = false
                }else{
                    this.isBottomShow = false
                }
            },

            //修改联系人
            modcontact(){
                this.isBottomShowByDetail = false
                this.addFormData = this.detailData
                this.isBottomShow = true
                this.isModify = true
            },
            loadData() {
                var self = this
                nw.postDefine('/app/userSupplier/contacts', {
                    data: {userId: this.userId, userType: this.userType},
                    success(res) {
                        self.resData = res
                    }
                })
            },
            deleteContact(index, userContactId) {
                var self = this
                nw.postDefine('/app/userSupplier/deleteContacts', {
                    data: {userContactId: userContactId},
                    success(res) {
                        self.resData.splice(index, 1)
                    }
                })
            },
            openBottomPopup() {
                this.isBottomShow = true;
            },

            openBottomPopupByDetail(index) {
                this.detailData = this.resData[index]
                this.isBottomShowByDetail = true
            },
            //非状态组件，需要在这里关闭
            popupOverlayBottomClick() {
                this.isBottomShow = false;
            },

            infoDetailPopupOverlayBottomClick() {
                this.detailData = {}
                this.isBottomShowByDetail = false;
            },

            //生日
            getTimeVal(data) {
                this.addFormData.contactBirthday = data
            },


            //输入框值
            inputVal(e) {
                var name = e.target.attr.name
                this.addFormData[name] = e.value
            },
            formatTime: function (time) {

                if(time && (time+'').indexOf(':') != -1){
                    return time
                }

                if (!time) {
                    return ''
                }
                return dtl.formatDateTime(time)
            },
            //提交表单值
            submitForm() {
                var self = this
                var modal = weex.requireModule('modal')
                var f = this.addFormData


                if (stl.isNonEmpty(f.contactName)) {
                    return modal.toast({message: '联系人不能为空'})
                }


                if (stl.isNonEmpty(f.contactPhone)) {
                    return modal.toast({message: '手机号码不能为空'})
                }

                if (!/^1(3[0-9]|4[56789]|5[0-35-9]|6[6]|7[0135678]|8[0-9]|9[89])[0-9]{8}$/.test(f.contactPhone)) {
                    return modal.toast({message: '手机号码格式不正确'})
                }


                if (!stl.isNonEmpty(f.contactEmail)) {
                    if(!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(f.contactEmail)){
                        return modal.toast({message: '邮箱格式不正确'})
                    }
                }
                var url = this.isModify ? '/app/userSupplier/addOrUpdateContacts':'/app/userSupplier/addOrUpdateContacts'

                nw.postDefine(url, {
                    data: f,
                    success(res) {


                        if(self.isModify){
                            self.isBottomShow = false
                            self.isBottomShowByDetail = true
                            self.detailData = self.addFormData
                            self.addFormData = initFormData
                            self.isModify = false
                        }else{
                            self.isBottomShow = false
                            self.addFormData = initFormData
                            self.resData.push(f)
                        }
                    }
                })
            }
        },
        created() {
            this.height = Utils.env.getPageHeight();
            this.addFormData.userId = this.userId
            this.addFormData.userType = this.userType
            this.loadData()
        }
    }
</script>